<html>

<head>
  <script type="module" src="../packages/wired-item/lib/wired-item.js"></script>
  <script type="module" src="../packages/wired-listbox/lib/wired-listbox.js"></script>

  <style>
    body {
      margin: 0;
      padding: 10px;
      font-family: sans-serif;
      line-height: 1.5;
    }

    wired-listbox {
      margin: 5px;
      --wired-item-selected-bg: darkblue;
    }

    .customListBox {
      --wired-item-selected-bg: pink;
      --wired-item-selected-color: darkred;
    }
  </style>
</head>

<body>
  <wired-listbox selected="one">
    <wired-item value="one">No. one</wired-item>
    <wired-item value="two">No. two</wired-item>
    <wired-item value="three">No. three</wired-item>
    <wired-item value="four">No. four</wired-item>
  </wired-listbox>

  <wired-listbox horizontal class="customListBox" selected="two">
    <wired-item value="one">No. one</wired-item>
    <wired-item value="two">No. two</wired-item>
    <wired-item value="three">No. three</wired-item>
    <wired-item value="four">No. four</wired-item>
  </wired-listbox>
</body>

</html>